// 库&插件
import React, { PureComponent, Suspense } from 'react';
import { HashRouter, NavLink } from "react-router-dom";
import { renderRoutes } from "react-router-config";
import { Provider } from "react-redux";

// 自行封装&工具
import routes from "./router";
import store from "./store";

// 样式
import "./assets/css/global.css";

// 组件

function AppNav() {
	return (
		<div id="nav">
			<NavLink to="/home">Home</NavLink>
			<span>丨</span>
			<NavLink to="/about">About</NavLink>
		</div>
	)
}

export default class App extends PureComponent {
	render() {
		return (
			<Provider store={store}>
				<HashRouter>
					<div id="app">
						<AppNav />
						<Suspense fallback={<p>加载中...</p>}>
							{/* react-router-config 统一管理router， <p>加载中...</p>可更换为自己的组件 */}
							{renderRoutes(routes)}
						</Suspense>
					</div>
				</HashRouter>
			</Provider>
		)
	}
}
